<template>
  <div class="app-container">
    <div class="container">
      <el-form :inline="true" label-position="right" class="search-form">
        <el-form-item label="项目名称">
          <el-input
            class="filter-item"
            v-model="projectName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="文件名称">
          <el-input
            class="filter-item"
            v-model="fileName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="合同工期">
          <el-date-picker
            v-model="datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="请选择"
            end-placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="文件分类">
          <el-input
            class="filter-item"
            v-model="fileType"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="合同/日志" >
          <el-select v-model="roh" clearable placeholder="请选择">
            <el-option
              v-for="item in rohoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button @click="exportFile">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-for="item in list" :key="item" class="table-container">
      <div style="font-weight: 500">项目名称：{{ item.projectName }}</div>
      <el-table
        :data="item.fileList"
        border
        style="width: 100%; margin-top: 5px; margin-bottom: 5px"
      >
        <el-table-column label="文件名称">
          <template #default="scope">
            <div
              class="fileName"
              v-if="!useEmpty(scope.row.fileName)"
              @click="downLoad(scope.row)"
            >
              {{ scope.row.fileName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdBy" label="创建人" />

        <el-table-column label="文件类型">
          <template #default="scope">
            <div v-if="scope.row.categroy && scope.row.categroy.indexOf('null')<0">
                {{ scope.row.categroy }}
            </div>
            <div v-else>
              {{ scope.row.fileSecondCategroy }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="创建时间">
          <template #default="scope">
            <div v-if="!useEmpty(scope.row.createdTime)">
              {{ formatDate(scope.row.createdTime) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row type="flex" justify="end" style="margin-top: 10px">
      <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-row>
    <!-- 弹窗 -->
    <el-dialog
      title="导出"
      v-model="detailsvisible"
      width="60%"
      style="background: #fff; height: 510px; margin-bottom: 20px"
    >
      <div>
        <el-form :inline="true" label-position="right" class="search-form">
          <el-form-item label="项目名称" >
            <el-input
              class="filter-item"
              v-model="projectName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="export-container">
        <div v-for="item in list" :key="item">
          <div style="font-weight: 500">项目名称：{{ item.projectName }}</div>
          <el-table
            :data="item.fileList"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%; margin-top: 5px; margin-bottom: 5px"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="文件名称">
              <template #default="scope">
                <div class="fileName" @click="downLoad(scope.row)">
                  {{ scope.row.fileName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createdBy" label="创建人" />

            <el-table-column label="文件类型">
              <template #default="scope">
                <div v-if="scope.row.categroy && scope.row.categroy.indexOf('null')<0">
                  {{ scope.row.categroy }}
                </div>
                <div v-else>
                  {{ scope.row.fileSecondCategroy }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="创建时间">
              <template #default="scope">
                <div v-if="!useEmpty(scope.row.createdTime)">
                  {{ formatDate(scope.row.createdTime) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, sizes"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
//@ts-ignore
import PropTable from "@/components/Table/PropTable/index.vue";

//@ts-ignore
import { fileStorage, exportZipFile } from "@/api/project/storageretrieval.js";

//@ts-ignore
import { exportExcel } from "@/utils/exprotExcel";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";

//@ts-ignore
import { useEmpty, formatDate } from "@/utils/index";
import { useRouter, useRoute } from "vue-router";

// 引入JSZip
import JSZip, { file } from "jszip";

const roh = ref(""); // 用于存储合同工期的选择
let rohoptions = [
    { value: '', label: '全部' },
    { value: '合同', label: '合同' },
    { value: '日志', label: '日志' }
];
const loading = ref(true);
const projectName = ref("");
const fileType = ref("");
const route = useRoute();

const list = ref([]);
let pageNum = ref(1);
let pageSize = ref(10);
let total = ref(0);
let fileName = ref();
let datetime = ref();
let startTime = ref();
let endTime = ref();

const fileStorageData = async () => {
  if (datetime.value && datetime.value[0]) {
    startTime.value = datetime.value[0];
  }
  if (datetime.value && datetime.value[1]) {
    endTime.value = datetime.value[1];
  }
  if (datetime.value === null) {
    startTime.value = "";
    endTime.value = "";
  }
  
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    projectName: projectName.value || route.query.projectName,
    fileName: fileName.value,
    startTime: startTime.value,
    endTime: endTime.value,
    fileType: fileType.value,
    roh: roh.value // 根据roh的值设置查询条件
  };

  let id = route.query.proId;

  if (id) {
    params["id"] = id;
  }

  const res = await fileStorage(params);
  if (res.code === 200 && res.rows) {
    
    list.value = res.rows;
    total.value = Number(res.total);
  } else {
    ElMessage.error(res.msg);
  }
};

let paramsSubmit;
const onSubmit = () => {
  fileStorageData();
};

const reset = () => {
  projectName.value = "";
  fileName.value = "";
  datetime.value = "";

  fileStorageData();
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fileStorageData();
};

const handleCurrentChange = (val: number) => {
  pageNum.value = val;
  fileStorageData();
};

// 文件流下载
const downLoad = (val) => {
  if (val) {
    // let url = val.fileUrl;
    // const a = document.createElement("a");
    // a.href = url;
    // a.download = val.fileName; // 下载后文件名
    // a.style.display = "none";
    // document.body.appendChild(a);
    // a.click(); // 点击下载
    // document.body.removeChild(a); // 下载完成移除元素
    // proxy.$download.name("/common/download/?fileName=" + val.filePath);
    proxy.$download.name(val.filePath);
  }
};

const detailsvisible = ref(false);

// 导出
const exportFile = () => {
  detailsvisible.value = true;
};

const selectedItems = ref([]); // 存储用户选择的项

const handleSelectionChange = (selection) => {
  // 更新选中项
  selectedItems.value = selection;
};

// 取消
const resetForm = () => {
  detailsvisible.value = false;
};

// @ts-ignore
const { proxy } = getCurrentInstance();

// 确认
const submitForm = async () => {
  // 如果用户未选择任何项
  if (selectedItems.value.length === 0) {
    ElMessage.error("请至少选择一项");
    return false;
  }

  const fileIdValues = selectedItems.value.map((item) => item.fileUuid);

  let fileValues = fileIdValues && fileIdValues.join(",");
  proxy.$download.zip("/common/bantchDownload/fileIds?fileIds=" + fileValues);
};

onMounted(async () => {
  await fileStorageData();
  setTimeout(() => {
    loading.value = false;
  }, 500);
});
</script>
<style scoped lang="scss">
.container {
  padding: 15px 0px 0px 15px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
}
.table-container {
  padding: 15px 0px 5px 15px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 5px;
}
.fileName {
  color: #337ab7;
  cursor: pointer;
}
.export-container {
  height: 300px;
  overflow: auto;

  &::-webkit-scrollbar {
    --el-scrollbar-opacity: 0.3;
    --el-scrollbar-bg-color: var(--el-text-color-secondary);
    --el-scrollbar-hover-opacity: 0.5;
    --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
  }

  &::-webkit-scrollbar-thumb {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: 10px;
    background: rgba($color: #909399, $alpha: 0.2);
    transition: var(--el-transition-duration) background-color;
    opacity: var(--el-scrollbar-opacity, 0.3);
  }
}
</style>
